<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>H+移动工作平台 - 优化版</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css">
  <style>
    :root {
      /* 医院色系 */
      --primary-color: #3D7EAA; /* 医疗蓝 */
      --primary-light: #6BA4D1;
      --primary-dark: #2B5B80;
      --primary-bg: #EBF4FA;
      
      --secondary-color: #41A3B5; /* 护理青 */
      --secondary-light: #6BC6D6;
      --secondary-dark: #2D7A8A;
      --secondary-bg: #E8F6F8;
      
      --accent-color: #59B269; /* 医院绿 */
      --accent-light: #7BC587;
      --accent-dark: #418A4D;
      --accent-bg: #EDFAEF;
      
      --highlight-color: #E77471; /* 温和红 */
      --highlight-light: #F5A3A1;
      --highlight-dark: #C45351;
      --highlight-bg: #FFF1F1;
      
      /* 功能色彩系统 */
      --success: #59B269; /* 同医院绿 */
      --warning: #F6C344;
      --error: #E77471; /* 同温和红 */
      --info: #3D7EAA; /* 同医疗蓝 */
      
      /* 状态背景色 */
      --success-bg: #EDFAEF;
      --warning-bg: #FFF8E6;
      --error-bg: #FFF1F1;
      --info-bg: #EBF4FA;
      
      /* 中性色系统 */
      --grey-50: #FAFAFA;
      --grey-100: #F5F5F5;
      --grey-200: #EEEEEE;
      --grey-300: #E0E0E0;
      --grey-400: #BDBDBD;
      --grey-500: #9E9E9E;
      --grey-600: #757575;
      --grey-700: #616161;
      --grey-800: #424242;
      --grey-900: #212121;
      
      /* 阴影变量 */
      --shadow-sm: 0 1px 2px 0 rgba(0,0,0,.05);
      --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
      --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
      
      /* 圆角变量 */
      --radius-sm: 4px;
      --radius-md: 8px;
      --radius-lg: 12px;
      --radius-xl: 16px;
      
      /* 过渡效果 */
      --transition-fast: 0.15s;
      --transition-normal: 0.25s;
      
      /* 安全区域 */
      --safe-area-bottom: env(safe-area-inset-bottom, 20px);
      --header-height: 56px;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background-color: var(--grey-100);
      color: var(--grey-900);
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    .app-container {
      max-width: 100%;
      margin: 0 auto;
      min-height: 100vh;
      position: relative;
      padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 60px);
    }
    
    /* 顶部导航栏 */
    .app-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      height: var(--header-height);
      background-color: var(--primary-color);
      color: white;
      display: flex;
      align-items: center;
      padding: 0 16px;
      z-index: 100;
      justify-content: space-between;
      box-shadow: var(--shadow-md);
    }
    
    .header-title {
      font-size: 18px;
      font-weight: 500;
    }
    
    .header-profile {
      display: flex;
      align-items: center;
    }
    
    .header-profile-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin-left: 10px;
      border: 2px solid rgba(255, 255, 255, 0.8);
      overflow: hidden;
    }
    
    .header-profile-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .header-actions {
      display: flex;
      align-items: center;
    }
    
    .header-action {
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 18px;
      position: relative;
      border-radius: 50%;
      transition: background-color var(--transition-fast);
    }
    
    .header-action:active {
      background-color: rgba(255, 255, 255, 0.2);
    }
    
    .badge {
      position: absolute;
      top: 6px;
      right: 6px;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      background-color: var(--highlight-color);
      color: white;
      font-size: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5px;
      font-weight: 600;
    }
    
    /* 全局搜索栏 */
    .search-container {
      padding: 12px 16px 8px;
      position: sticky;
      top: var(--header-height);
      z-index: 90;
      background-color: var(--grey-50);
    }
    
    .search-bar {
      height: 44px;
      background-color: white;
      border-radius: 22px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-fast);
      border: 1px solid var(--grey-200);
    }
    
    .search-bar:active {
      box-shadow: var(--shadow-md);
      border-color: var(--primary-light);
    }
    
    .search-icon {
      color: var(--grey-500);
      margin-right: 10px;
    }
    
    .search-placeholder {
      color: var(--grey-500);
      font-size: 15px;
      flex: 1;
    }
    
    /* 统一消息中心 */
    .message-center {
      margin: 8px 16px 16px;
      background-color: white;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--grey-200);
    }
    
    .message-header {
      padding: 14px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid var(--grey-200);
    }
    
    .message-header-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--grey-800);
      display: flex;
      align-items: center;
    }
    
    .message-header-title i {
      margin-right: 8px;
      color: var(--primary-color);
    }
    
    .message-header-badge {
      background-color: var(--primary-color);
      color: white;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 600;
      margin-left: 8px;
    }
    
    .message-toggle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      color: var(--grey-600);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all var(--transition-fast);
    }
    
    .message-toggle:active {
      background-color: var(--grey-200);
    }
    
    .message-toggle i {
      transition: transform var(--transition-fast);
    }
    
    .message-toggle.collapsed i {
      transform: rotate(180deg);
    }
    
    .message-tabs {
      display: flex;
      border-bottom: 1px solid var(--grey-200);
      background-color: var(--grey-50);
      padding: 0 8px;
    }
    
    .message-tab {
      padding: 10px 14px;
      font-size: 13px;
      font-weight: 500;
      color: var(--grey-700);
      position: relative;
    }
    
    .message-tab.active {
      color: var(--primary-color);
    }
    
    .message-tab.active:after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 14px;
      right: 14px;
      height: 2px;
      background-color: var(--primary-color);
    }
    
    .message-tab-badge {
      position: absolute;
      top: 6px;
      right: 2px;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      background-color: var(--highlight-color);
      color: white;
      font-size: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 4px;
    }
    
    .message-content {
      max-height: 360px;
      overflow-y: auto;
    }
    
    .message-item {
      padding: 12px 16px;
      border-bottom: 1px solid var(--grey-200);
      display: flex;
      align-items: center;
      transition: background-color var(--transition-fast);
    }
    
    .message-item:active {
      background-color: var(--grey-100);
    }
    
    .message-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .message-content-text {
      flex: 1;
      min-width: 0;
    }
    
    .message-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--grey-900);
      margin-bottom: 4px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
    }
    
    .message-title-tag {
      font-size: 10px;
      padding: 1px 4px;
      border-radius: 4px;
      margin-left: 6px;
      font-weight: 600;
    }
    
    .tag-urgent {
      background-color: var(--highlight-bg);
      color: var(--highlight-color);
    }
    
    .message-desc {
      font-size: 12px;
      color: var(--grey-600);
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      max-height: 36px;
    }
    
    .message-time {
      font-size: 11px;
      color: var(--grey-500);
      margin-top: 2px;
    }
    
    .message-status {
      margin-left: 8px;
      font-size: 12px;
      padding: 3px 8px;
      border-radius: 12px;
      white-space: nowrap;
      font-weight: 500;
    }
    
    /* 常用功能区 */
    .section-title {
      font-size: 16px;
      font-weight: 600;
      color: var(--grey-800);
      display: flex;
      align-items: center;
      padding: 0 16px;
      margin: 16px 0 12px;
    }
    
    .section-title i {
      margin-right: 8px;
      color: var(--primary-color);
      font-size: 18px;
    }
    
    .frequent-functions {
      padding: 0 16px;
      margin-bottom: 20px;
    }
    
    .function-row {
      display: flex;
      margin-bottom: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    
    .function-row::-webkit-scrollbar {
      display: none;
    }
    
    .function-card {
      min-width: 80px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      margin-right: 12px;
      background-color: white;
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      transition: all var(--transition-fast);
      border: 1px solid var(--grey-200);
    }
    
    .function-card:active {
      transform: scale(0.96);
      box-shadow: var(--shadow-md);
    }
    
    .function-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      color: white;
      box-shadow: 0 3px 6px rgba(0,0,0,0.1);
    }
    
    .function-name {
      font-size: 12px;
      text-align: center;
      color: var(--grey-800);
      line-height: 1.3;
    }
    
    /* 快捷事项 */
    .quick-tasks {
      margin: 0 16px 24px;
    }
    
    .task-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .task-card {
      background-color: white;
      border-radius: var(--radius-lg);
      padding: 16px;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--grey-200);
      transition: all var(--transition-fast);
    }
    
    .task-card:active {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    
    .task-card-header {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .task-card-icon {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-md);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 10px;
      color: white;
    }
    
    .task-card-title {
      font-size: 14px;
      font-weight: 500;
      color: var(--grey-800);
      flex: 1;
    }
    
    .task-card-count {
      font-size: 20px;
      font-weight: 600;
      color: var(--grey-900);
    }
    
    .task-card-desc {
      font-size: 12px;
      color: var(--grey-600);
    }
    
    /* 底部导航栏 */
    .bottom-nav {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      height: 56px;
      background-color: white;
      display: flex;
      justify-content: space-around;
      box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
      border-top: 1px solid var(--grey-200);
      padding-bottom: env(safe-area-inset-bottom, 0);
      z-index: 90;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 8px 0;
      color: var(--grey-600);
      transition: color var(--transition-fast);
    }
    
    .nav-item.active {
      color: var(--primary-color);
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }
    
    .nav-label {
      font-size: 11px;
      font-weight: 500;
    }
    
    /* 主题颜色 */
    .theme-approval {
      background-color: var(--primary-color);
    }
    
    .theme-task {
      background-color: var(--accent-color);
    }
    
    .theme-material {
      background-color: var(--secondary-color);
    }
    
    .theme-finance {
      background-color: var(--highlight-color); 
    }
    
    /* 工作流类型标签 */
    .workflow-tag {
      display: inline-block;
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 600;
      margin-right: 4px;
    }
    
    .tag-approval {
      background-color: var(--primary-bg);
      color: var(--primary-color);
    }
    
    .tag-material {
      background-color: var(--secondary-bg);
      color: var(--secondary-color);
    }
    
    .tag-finance {
      background-color: var(--highlight-bg);
      color: var(--highlight-color);
    }
    
    .tag-asset {
      background-color: var(--accent-bg);
      color: var(--accent-color);
    }
    
    /* 页面内容区 */
    .page-content {
      min-height: calc(100vh - 56px - 56px - 20px);
    }
    
    /* 应用页面显示隐藏 */
    .page {
      display: none;
    }
    
    .page.active {
      display: block;
    }
    
    /* 响应式适配 */
    @media (max-width: 480px) {
      .task-grid {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- 头部导航栏 -->
    <div class="app-header">
      <div class="header-title">H+移动工作平台</div>
      <div class="header-actions">
        <div class="header-action">
          <i class="fas fa-bell"></i>
          <span class="badge">12</span>
        </div>
        <div class="header-profile">
          <div class="header-profile-avatar">
            <img src="https://randomuser.me/api/portraits/men/85.jpg" alt="头像">
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页面内容区 - 首页 -->
    <div class="page-content page active" id="page-home">
      <!-- 全局搜索栏 -->
      <div class="search-container">
        <div class="search-bar">
          <i class="fas fa-search search-icon"></i>
          <div class="search-placeholder">搜索功能、申请单、通知...</div>
        </div>
      </div>
      
      <!-- 统一消息中心 -->
      <div class="message-center">
        <div class="message-header">
          <div class="message-header-title">
            <i class="fas fa-comment-dots"></i>流程消息
            <span class="message-header-badge">12</span>
          </div>
          <div class="message-toggle" id="messageToggle">
            <i class="fas fa-chevron-up"></i>
          </div>
        </div>
        
        <div class="message-tabs">
          <div class="message-tab active" data-type="all">全部</div>
          <div class="message-tab" data-type="approval">
            待审批
            <span class="message-tab-badge">5</span>
          </div>
          <div class="message-tab" data-type="task">
            待办事项
            <span class="message-tab-badge">4</span>
          </div>
          <div class="message-tab" data-type="notice">通知</div>
          <div class="message-tab" data-type="system">系统</div>
        </div>
        
        <div class="message-content" id="messageContent">
          <!-- 审批类消息 -->
          <div class="message-item">
            <div class="message-icon theme-approval">
              <i class="fas fa-file-signature"></i>
            </div>
            <div class="message-content-text">
              <div class="message-title">
                物资申领审批
                <span class="message-title-tag tag-urgent">紧急</span>
              </div>
              <div class="message-desc">李护士申请办公用品3项，需要您审批</div>
              <div class="message-time">10分钟前</div>
            </div>
            <div class="message-status tag-approval">待审批</div>
          </div>
          
          <div class="message-item">
            <div class="message-icon theme-approval">
              <i class="fas fa-clipboard-list"></i>
            </div>
            <div class="message-content-text">
              <div class="message-title">报销单审批</div>
              <div class="message-desc">王医生提交的出差报销单(¥2,580.00)需要您审批</div>
              <div class="message-time">30分钟前</div>
            </div>
            <div class="message-status tag-finance">财务类</div>
          </div>
          
          <!-- 任务类消息 -->
          <div class="message-item">
            <div class="message-icon theme-task">
              <i class="fas fa-tasks"></i>
            </div>
            <div class="message-content-text">
              <div class="message-title">资产盘点确认</div>
              <div class="message-desc">神经外科资产盘点需要在今日完成确认</div>
              <div class="message-time">今天 09:30</div>
            </div>
            <div class="message-status tag-asset">资产类</div>
          </div>
          
          <div class="message-item">
            <div class="message-icon theme-task">
              <i class="fas fa-laptop"></i>
            </div>
            <div class="message-content-text">
              <div class="message-title">设备验收</div>
              <div class="message-desc">新采购的医疗设备已到货，请尽快完成验收</div>
              <div class="message-time">昨天 14:20</div>
            </div>
            <div class="message-status tag-asset">资产类</div>
          </div>
          
          <!-- 通知类消息 -->
          <div class="message-item">
            <div class="message-icon theme-material">
              <i class="fas fa-truck"></i>
            </div>
            <div class="message-content-text">
              <div class="message-title">您申领的物资已发放</div>
              <div class="message-desc">您在5月15日申领的医疗耗材已发放，请到物资部领取</div>
              <div class="message-time">昨天 10:15</div>
            </div>
            <div class="message-status tag-material">物资类</div>
          </div>
        </div>
      </div>
      
      <!-- 常用功能 -->
      <div class="section-title">
        <i class="fas fa-star"></i>常用功能
      </div>
      
      <div class="frequent-functions">
        <div class="function-row">
          <div class="function-card">
            <div class="function-icon theme-material">
              <i class="fas fa-clipboard-list"></i>
            </div>
            <div class="function-name">物资申领</div>
          </div>
          
          <div class="function-card">
            <div class="function-icon theme-approval">
              <i class="fas fa-tasks"></i>
            </div>
            <div class="function-name">我的审批</div>
          </div>
          
          <div class="function-card">
            <div class="function-icon theme-finance">
              <i class="fas fa-receipt"></i>
            </div>
            <div class="function-name">报销申请</div>
          </div>
          
          <div class="function-card">
            <div class="function-icon theme-task">
              <i class="fas fa-laptop"></i>
            </div>
            <div class="function-name">资产查询</div>
          </div>
          
          <div class="function-card">
            <div class="function-icon theme-approval">
              <i class="fas fa-user-clock"></i>
            </div>
            <div class="function-name">请假申请</div>
          </div>
        </div>
      </div>
      
      <!-- 快捷事项 -->
      <div class="section-title">
        <i class="fas fa-bolt"></i>工作概览
      </div>
      
      <div class="quick-tasks">
        <div class="task-grid">
          <div class="task-card">
            <div class="task-card-header">
              <div class="task-card-icon theme-approval">
                <i class="fas fa-file-signature"></i>
              </div>
              <div class="task-card-title">待我审批</div>
            </div>
            <div class="task-card-count">5</div>
            <div class="task-card-desc">有2项紧急审批待处理</div>
          </div>
          
          <div class="task-card">
            <div class="task-card-header">
              <div class="task-card-icon theme-task">
                <i class="fas fa-clipboard-check"></i>
              </div>
              <div class="task-card-title">我的待办</div>
            </div>
            <div class="task-card-count">4</div>
            <div class="task-card-desc">今日截止事项：2项</div>
          </div>
          
          <div class="task-card">
            <div class="task-card-header">
              <div class="task-card-icon theme-material">
                <i class="fas fa-boxes"></i>
              </div>
              <div class="task-card-title">物资申领</div>
            </div>
            <div class="task-card-count">3</div>
            <div class="task-card-desc">进行中申领：2项</div>
          </div>
          
          <div class="task-card">
            <div class="task-card-header">
              <div class="task-card-icon theme-finance">
                <i class="fas fa-money-bill-wave"></i>
              </div>
              <div class="task-card-title">报销单</div>
            </div>
            <div class="task-card-count">2</div>
            <div class="task-card-desc">未完成报销单：1项</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页面内容区 - 工作 -->
    <div class="page-content page" id="page-work">
      <!-- 工作页面的内容 -->
      <div class="search-container">
        <div class="search-bar">
          <i class="fas fa-search search-icon"></i>
          <div class="search-placeholder">搜索任务、审批、工作事项...</div>
        </div>
      </div>
      
      <div class="section-title">
        <i class="fas fa-tasks"></i>待办任务
      </div>
      
      <!-- 这里是工作页面的具体内容，可以根据需要扩展 -->
    </div>
    
    <!-- 页面内容区 - 应用 -->
    <div class="page-content page" id="page-apps">
      <!-- 应用页面的内容 -->
      <div class="search-container">
        <div class="search-bar">
          <i class="fas fa-search search-icon"></i>
          <div class="search-placeholder">搜索应用、功能...</div>
        </div>
      </div>
      
      <div class="section-title">
        <i class="fas fa-th-large"></i>全部应用
      </div>
      
      <!-- 这里是应用页面的具体内容，包含所有功能入口 -->
    </div>
    
    <!-- 页面内容区 - 我的 -->
    <div class="page-content page" id="page-profile">
      <!-- 个人页面的内容 -->
      <div class="section-title">
        <i class="fas fa-user"></i>个人中心
      </div>
      
      <!-- 这里是个人页面的具体内容 -->
    </div>
    
    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item active" data-page="page-home">
        <div class="nav-icon">
          <i class="fas fa-home"></i>
        </div>
        <div class="nav-label">首页</div>
      </div>
      <div class="nav-item" data-page="page-work">
        <div class="nav-icon">
          <i class="fas fa-tasks"></i>
        </div>
        <div class="nav-label">工作</div>
      </div>
      <div class="nav-item" data-page="page-apps">
        <div class="nav-icon">
          <i class="fas fa-th-large"></i>
        </div>
        <div class="nav-label">应用</div>
      </div>
      <div class="nav-item" data-page="page-profile">
        <div class="nav-icon">
          <i class="fas fa-user"></i>
        </div>
        <div class="nav-label">我的</div>
      </div>
    </div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // 消息中心折叠面板功能
      const messageToggle = document.getElementById('messageToggle');
      const messageContent = document.getElementById('messageContent');
      
      // 默认展开
      messageToggle.addEventListener('click', function() {
        messageContent.style.display = messageContent.style.display === 'none' ? 'block' : 'none';
        messageToggle.classList.toggle('collapsed');
      });
      
      // 消息分类切换
      const messageTabs = document.querySelectorAll('.message-tab');
      const messageItems = document.querySelectorAll('.message-item');
      
      messageTabs.forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除所有活动状态
          messageTabs.forEach(t => t.classList.remove('active'));
          
          // 添加当前选中项的活动状态
          this.classList.add('active');
          
          const type = this.getAttribute('data-type');
          
          // 过滤消息项（在实际应用中根据类型筛选）
          if (type === 'all') {
            messageItems.forEach(item => item.style.display = 'flex');
          } else {
            // 在实际应用中根据消息类型进行筛选
            // 这里只是示意，实际实现需要根据具体数据结构
            console.log('筛选消息类型：' + type);
          }
        });
      });
      
      // 底部导航切换页面
      const navItems = document.querySelectorAll('.nav-item');
      const pages = document.querySelectorAll('.page');
      
      navItems.forEach(item => {
        item.addEventListener('click', function() {
          // 移除所有活动状态
          navItems.forEach(navItem => navItem.classList.remove('active'));
          pages.forEach(page => page.classList.remove('active'));
          
          // 添加当前选中项的活动状态
          this.classList.add('active');
          
          // 显示对应页面
          const pageId = this.getAttribute('data-page');
          document.getElementById(pageId).classList.add('active');
          
          // 触觉反馈
          if ('vibrate' in navigator) {
            navigator.vibrate(5);
          }
        });
      });
      
      // 常用功能和工作概览卡片点击
      const functionCards = document.querySelectorAll('.function-card');
      const taskCards = document.querySelectorAll('.task-card');
      
      functionCards.forEach(card => {
        card.addEventListener('click', function() {
          // 添加触觉反馈
          if ('vibrate' in navigator) {
            navigator.vibrate(5);
          }
          
          // 获取功能名称
          const functionName = this.querySelector('.function-name').textContent;
          console.log('点击了功能：' + functionName);
          
          // 实际应用中应该跳转到对应功能页面
        });
      });
      
      taskCards.forEach(card => {
        card.addEventListener('click', function() {
          // 添加触觉反馈
          if ('vibrate' in navigator) {
            navigator.vibrate(5);
          }
          
          // 获取任务卡片标题
          const cardTitle = this.querySelector('.task-card-title').textContent;
          console.log('点击了工作卡片：' + cardTitle);
          
          // 实际应用中应该跳转到对应任务列表页面
        });
      });
    });
  </script>
</body>
</html> 